html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	user-select: none;
}
body {
	padding-top: 4rem;
}
section {
	padding: 1.25rem 1rem;
}

.main {
	transition: margin-left .5s;
}

.navbar {
	padding: 0 1rem;
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index: 9999;
	box-shadow: 0 5px 5px -5px rgba(31, 73, 125, 0.8);;
}

.sidenav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	overflow-x: hidden;	
	transition: 0.5s;
	margin-top: 3rem;
	box-shadow: 6px 0 8px -5px rgba(31, 73, 125, 0.8);
}

.row {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
}
.heading-row-centered {
	justify-content: center;
}

.no-vertical-padding {
	padding-top:0;
	padding-bottom:0;
}

.green {
	color: green;
}
.red {
	color: red;
}
.yellow {
	color: orange;
}

.navbar,
.panel-header {
	display: flex;
	align-items: center;
	width: 100%;
}

.row > ui5-button,
.row > ui5-toggle-button,
.row > ui5-checkbox,
.row > ui5-radio-button,
.row > ui5-link,
.row > ui5-icon {
	margin: 8px;
}

.row > ui5-card {
	margin: 1rem;
}

/* Icons */
.icon-blue,
.icon-red {
	width:3rem;
	height:3rem;
	font-size:1.5rem;
}

.icon-medium {
	font-size:1.25rem;
}

.icon-small {
	font-size:1rem;
}

.icon-blue {
	color:#0a6ed1;
	background-color: #fafafa;
}
.icon-blue:hover:not(.icon-active) {
	color: #fff;
	background-color:	#0854a0;
}

.icon-red {
	color:crimson;
	background-color: #fafafa;
}
.icon-red:hover {
	color: #fff;
	background-color: #a20000;
}